import "./style.scss";
import "../../comm.scss";
import React,{ Component } from 'react';
import Cesium from "cesium/Cesium";
import { Button } from 'antd';
import { connect } from "react-redux";

class Roller extends Component {
    addRoller(){
        const { viewer } = this.props;
        let layers = viewer.imageryLayers;
        let earthAtNight = layers.addImageryProvider(new Cesium.IonImageryProvider({ assetId : 3812 }));
        earthAtNight.splitDirection = Cesium.ImagerySplitDirection.LEFT; // Only show to the left of the slider.

        // Sync the position of the slider with the split position
        let slider = document.getElementById('slider');
        viewer.scene.imagerySplitPosition = (slider.offsetLeft) / slider.parentElement.offsetWidth;

        let handler = new Cesium.ScreenSpaceEventHandler(slider);

        let moveActive = false;

        function move(movement){
            if ( !moveActive ) {
                return;
            }

            let relativeOffset = movement.endPosition.x;
            let splitPosition = (slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
            slider.style.left = 100.0 * splitPosition + '%';
            viewer.scene.imagerySplitPosition = splitPosition;
        }

        handler.setInputAction(function(){
            moveActive = true;
        },Cesium.ScreenSpaceEventType.LEFT_DOWN);
        handler.setInputAction(function(){
            moveActive = true;
        },Cesium.ScreenSpaceEventType.PINCH_START);

        handler.setInputAction(move,Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        handler.setInputAction(move,Cesium.ScreenSpaceEventType.PINCH_MOVE);

        handler.setInputAction(function(){
            moveActive = false;
        },Cesium.ScreenSpaceEventType.LEFT_UP);
        handler.setInputAction(function(){
            moveActive = false;
        },Cesium.ScreenSpaceEventType.PINCH_END);
    }

    render(){
        return (
            <div className="btn">
                <Button>卷帘对比(此功能暂时屏蔽)</Button>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    viewer : state.App.viewer
});

export default connect(mapStateToProps,{  })(Roller);